<template>
  <div>
    <a-form layout="inline" :form="form" @submit="handleSubmit">
      <a-form-item label="查询维度">
        <a-select
          v-decorator="['dimension', { initialValue: 'class' }]"
        >
          <a-select-option value="class">班级</a-select-option>
          <a-select-option value="week">周次</a-select-option>
          <a-select-option value="day">星期</a-select-option>
          <a-select-option value="period">节次</a-select-option>
          <a-select-option value="teacher">教师</a-select-option>
          <a-select-option value="classroom">教室</a-select-option>
        </a-select>
      </a-form-item>
      
      <a-form-item label="具体值">
        <a-input
          v-decorator="['value']"
          placeholder="请输入查询值"
          style="width: 180px"
        />
      </a-form-item>
      
      <a-form-item>
        <a-button type="primary" html-type="submit">查询</a-button>
        <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
      </a-form-item>
    </a-form>
    
    <a-table 
      :columns="columns" 
      :dataSource="tableData" 
      :loading="loading"
      :pagination="pagination"
      style="margin-top: 20px"
      @change="handleTableChange"
    >
      <template slot="operation" slot-scope="text, record">
        <a href="javascript:;" @click="showDetail(record)">详情</a>
      </template>
    </a-table>
    
    <!-- 详情弹窗 -->
    <a-modal
      title="排课详情"
      :visible="detailVisible"
      @ok="handleDetailOk"
      @cancel="handleDetailCancel"
      width="800px"
    >
      <a-descriptions bordered :column="2">
        <a-descriptions-item label="班级">{{ detailData.className }}</a-descriptions-item>
        <a-descriptions-item label="课程名称">{{ detailData.courseName }}</a-descriptions-item>
        <a-descriptions-item label="教师">{{ detailData.teacher }}</a-descriptions-item>
        <a-descriptions-item label="教室">{{ detailData.classroom }}</a-descriptions-item>
        <a-descriptions-item label="周次">{{ detailData.week }}</a-descriptions-item>
        <a-descriptions-item label="星期/节次">{{ detailData.time }}</a-descriptions-item>
        <a-descriptions-item label="课程类型">{{ detailData.courseType }}</a-descriptions-item>
        <a-descriptions-item label="学分">{{ detailData.credit }}</a-descriptions-item>
        <a-descriptions-item label="学时">{{ detailData.hours }}</a-descriptions-item>
        <a-descriptions-item label="学生人数">{{ detailData.studentCount }}</a-descriptions-item>
        <a-descriptions-item label="备注" :span="2">{{ detailData.remark || '无' }}</a-descriptions-item>
      </a-descriptions>
      
      <div style="margin-top: 20px">
        <h4>课程安排时间表</h4>
        <a-timeline>
          <a-timeline-item v-for="(item, index) in detailData.scheduleList" :key="index">
            {{ item.week }} {{ item.day }} {{ item.period }} ({{ item.classroom }})
          </a-timeline-item>
        </a-timeline>
      </div>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: '班级',
    dataIndex: 'className',
    key: 'className',
    sorter: true
  },
  {
    title: '课程名称',
    dataIndex: 'courseName',
    key: 'courseName',
    sorter: true
  },
  {
    title: '教师',
    dataIndex: 'teacher',
    key: 'teacher',
    sorter: true
  },
  {
    title: '教室',
    dataIndex: 'classroom',
    key: 'classroom',
    sorter: true
  },
  {
    title: '周次',
    dataIndex: 'week',
    key: 'week'
  },
  {
    title: '星期/节次',
    dataIndex: 'time',
    key: 'time'
  },
  {
    title: '操作',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  
  data() {
    return {
      columns,
      loading: false,
      tableData: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        showTotal: total => `共 ${total} 条`
      },
      detailVisible: false,
      detailData: {},
      queryParams: {}
    }
  },
  
  mounted() {
    this.fetchData()
  },
  
  methods: {
    fetchData(params = {}) {
      this.loading = true
      // 模拟API请求
      setTimeout(() => {
        // 实际项目中这里应该是API调用
        const mockData = this.getMockData(params)
        this.tableData = mockData.data
        this.pagination.total = mockData.total
        this.loading = false
      }, 500)
    },
    
    getMockData(params) {
      // 模拟数据
      const allData = [
        {
          key: '1',
          className: '24级计算机网络技术二班',
          courseName: '数据结构',
          teacher: '王芳',
          classroom: 'bj007',
          week: '1-16周',
          time: '周一1-2节',
          courseType: '专业必修',
          credit: 4,
          hours: 64,
          studentCount: 45,
          remark: '需要使用多媒体教室',
          scheduleList: [
            { week: '1-16周', day: '周一', period: '1-2节', classroom: 'bj007' },
            { week: '1-16周', day: '周三', period: '3-4节', classroom: 'bj007' }
          ]
        },
        {
          key: '2',
          className: '24级计算机网络技术一班',
          courseName: '操作系统',
          teacher: '李娜',
          classroom: 'B205',
          week: '1-8周',
          time: '周二3-4节',
          courseType: '专业必修',
          credit: 3,
          hours: 48,
          studentCount: 45,
          scheduleList: [
            { week: '1-8周', day: '周二', period: '3-4节', classroom: 'B205' },
            { week: '1-8周', day: '周四', period: '1-2节', classroom: 'B205' }
          ]
        },
      ]
      
      // 模拟筛选
      let filteredData = [...allData]
      if (params.dimension && params.value) {
        filteredData = filteredData.filter(item => {
          const fieldMap = {
            class: 'className',
            week: 'week',
            day: 'time',
            period: 'time',
            teacher: 'teacher',
            classroom: 'classroom'
          }
          const field = fieldMap[params.dimension]
          return item[field].includes(params.value)
        })
      }
      
      // 模拟分页
      const pageSize = params.pageSize || this.pagination.pageSize
      const current = params.current || this.pagination.current
      const start = (current - 1) * pageSize
      const end = start + pageSize
      const paginatedData = filteredData.slice(start, end)
      
      return {
        data: paginatedData,
        total: filteredData.length
      }
    },
    
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.queryParams = values
          this.pagination.current = 1
          this.fetchData(values)
        }
      })
    },
    
    handleReset() {
      this.form.resetFields()
      this.queryParams = {}
      this.pagination.current = 1
      this.fetchData()
    },
    
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      this.fetchData({
        ...this.queryParams,
        current: pagination.current,
        pageSize: pagination.pageSize
      })
    },
    
    showDetail(record) {
      this.detailData = record
      this.detailVisible = true
    },
    
    handleDetailOk() {
      this.detailVisible = false
    },
    
    handleDetailCancel() {
      this.detailVisible = false
    }
  }
}
</script>

<style scoped>
.ant-form-item {
  margin-bottom: 16px;
}
</style>